<template>
  <div :id="id" :class="className" :style="{height:height,width:width}" />
</template>

<script>
import * as echarts from 'echarts';
import resize from './mixins/resize';
import mapJson from './南通市.json';

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '200px'
    },
    height: {
      type: String,
      default: '200px'
    },
    cData: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      chart: null,
      data: null,
      timer: null
    }
  },
  mounted() {
    this.initChart(this.cData);
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null;
    this.data = null;
    clearInterval(this.timer);
  },
  methods: {
    toFix(val){
      if(val>10000){
        return (val/10000).toFixed(2)+'万元';
      }else{
        return val+'元';
      }
    },
    initChart(e) {
      echarts.registerMap('nanTong', mapJson);
      this.chart = echarts.init(document.getElementById(this.id));
      let dataAxis = e.cLabel;
      let data = e.cData;
      let array = data.map(item=>item.badAmount);
      let max = Math.max(...array)
      this.data = {
        title: {
          text: '淄博市地图',
        },
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(50,50,50,0.7)',
          textStyle:{color:'#fff'},
          formatter:(data)=>{
              return data.data.name+"<br/>贷款余额："+this.toFix(data.data.value)+"<br/>不良贷款余额："+this.toFix(data.data.badAmount)+
              "<br/>不良贷款余额占比："+data.data.amountPercent+"%<br/>企业总数："+data.data.num+
              "家<br/>不良贷款企业总数："+data.data.badNum+"家<br/>不良贷款企业占比："+data.data.numPercent+'%';
              
            }
        },
        /* toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {}
          }
        }, */
        visualMap: {
          min:0,
          max:max,
          realtime: false,
          calculable: true,
          inRange: {
            color: ['#188df0', '#FF7575']
          }
        },
        series: [{
          type: 'map',
          map: 'nanTong',
          roam: true,
          label:{
            normal:{
              show: true
            }
          },
          data: data
        }]
      };
      let _this = this;
      _this.chart.setOption(this.data,true);
      // _this.timer = setInterval(function() {
      //   _this.chart.setOption({}, true);
      //   _this.chart.setOption(_this.data, true);
      // }, 10000);


      // 监听点击事件
      var zoomSize = 6;
      _this.chart.on('click', function(params) {
        console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
        _this.chart.dispatchAction({
          type: 'dataZoom',
          startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
          endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
        });
      });
    }
  }
}
</script>
